<template>
	<div class="organ-manage-container">
		<filterBar ref="filterBar" :materialProlList="materialProlList"
		:materialUseList="materialUseList"
		:producedureList="producedureList"
		@on-search="refresh"></filterBar>
		<w-table
			ref="listTable"
			:tableColumn="tableColumn"
			:listData="tableData"
			:showColumnFilterBtn="false"
			@on-size-change="handleSizeChange"
			@on-current-change="handleCurrentChange"
			@on-table-row-dbclick="onTableRowDbclick"
		>
			<div slot="btn-tools-right" class="tools-right">
				<el-button type="danger" plain size='mini' @click="mutileDel">删除</el-button>
				<el-button type="success" plain size='mini' @click="mutileEnable">启用</el-button>
				<el-button type="info" plain size='mini' @click="mutileDiable">停用</el-button>
				<el-button type="primary" size='mini' slot="reference" icon="el-icon-plus" @click="onCreateClick">新建路线</el-button>
				<el-button type="primary" size='mini' slot="reference" icon="el-icon-download" @click="onExport">导出</el-button>
			</div>
		</w-table>
	</div>
</template>
<script>
import filterBar from './FilterBar.vue'
import FxListStateTag from '@/components/common/Fx-list-state-tag.vue'
export default {
	name: 'listContainer',
	props: {
		getCurrentNode: Function
	},
	components: {
		filterBar
	},
	data () {
		return {
			tableColumn: [
				{ prop: 'materialName', label: '产成品', required: true },
				{ prop: 'code', label: '编号', required: true },
				{ prop: 'version', label: '版本编号', required: true },
				{ prop: 'effectDate', label: '生效日期', required: true, width: '160px', showOverflowTooltip: true },
				{
					prop: 'enable',
					label: '启停状态',
					required: true,
					fxRender: this.enableRender
				},
				{ prop: 'remark', label: '工艺路线描述', required: true, showOverflowTooltip: true },
				{
					prop: 'modifyUser', label: '修改人', required: true
				},
				{
					prop: 'modifyDate', label: '修改时间', required: true, width: '160px'
				},
				{
					prop: 'createUser', label: '创建人', required: true
				},
				{
					prop: 'createDate', label: '创建时间', required: true, width: '160px'
				}
			],
			tableData: [],
			materialProlList: [],
			materialUseList: [],
			producedureList: []
		}
	},
	computed: {
		enableState (val, key) {
			return (val, key) => {
				return this.$fxStateMiddleware.getStateObj('enableState')(val)[key]
			}
		}
	},
	methods: {
		refresh () {
			this.$refs.listTable.setPaginationCurrent(1)
			this.$refs.listTable.clearSelected()
			return Promise.all([this.getAllMaterialProList(), this.getAllMaterialUseList(), this.getProcedureListAll(), this.getListData()]).then(([materialProList, materialUseList, procedureList, res]) => {
				this.materialProlList = materialProList
				this.materialUseList = materialUseList
				this.producedureList = procedureList
				this.$refs.listTable.setPaginationTotal(res.total)
				this.tableData = res.data
			})
		},
		handleSizeChange (val) {
			this.getListData().then(res => {
				this.$refs.listTable.setPaginationTotal(res.total)
				this.tableData = res.data
			})
		},
		handleCurrentChange (val) {
			this.getListData().then(res => {
				this.$refs.listTable.setPaginationTotal(res.total)
				this.tableData = res.data
			})
		},
		getSearchParams () {
			const params = {
				...this.$refs.filterBar.getFilterParams()
			}
			if (this.getCurrentNode().id !== '2') {
				params.treeId = this.getCurrentNode().id
				params.seq = this.getCurrentNode().seq
				params.level = this.getCurrentNode().level
			}
			return {
				...this.$refs.listTable.getPaginationParams(),
				params: {
					...params
				}
			}
		},
		getAllMaterialProList () {
			return this.$fxApi('material.findMeterialByType')({
				query: {
					processingFlag: 1
				}
			})
		},
		getAllMaterialUseList () {
			return this.$fxApi('material.findMeterialByType')({
				query: {
					processingFlag: 2
				}
			})
		},
		getProcedureListAll () {
			return this.$fxApi('procedure.findListAll')
		},
		getListData (searchParams) {
			return this.$fxApi('routing.pageQuery')({ data: this.getSearchParams() })
		},
		onCreateClick () {
			this.$emit('on-create')
		},
		// 批量删除
		mutileDel () {
			const _selData = this.$refs.listTable.selectedRowArr
			return this.$fxCommon.orderListFrontFunc('deleteMulity', _selData)
				.then(this.deleteMaterial)
				.then(this.$fxCommon.orderSuccess('deleteMulity'))
				.then(this.refresh)
		},
		// 批量启用
		mutileEnable () {
			const _selData = this.$refs.listTable.selectedRowArr
			return this.$fxCommon.orderListFrontFunc('enableMulity', _selData).then(() => {
				this.handleState(1).then(this.$fxCommon.orderSuccess('enableMulity')).then(this.refresh)
			})
		},
		// 批量停用
		mutileDiable () {
			const _selData = this.$refs.listTable.selectedRowArr
			return this.$fxCommon.orderListFrontFunc('disableMulity', _selData).then(() => {
				this.handleState(0).then(this.$fxCommon.orderSuccess('disableMulity')).then(this.refresh)
			})
		},
		// 启用 停用
		handleState (type) {
			const _selData = this.$refs.listTable.selectedRowArr
			const ids = _selData.map(station => station.id)
			return new Promise(resolve => {
				this.$fxApi('routing.updateEnable')({
					data: {
						ids: ids,
						enable: type
					}
				}).then(res => {
					resolve(res)
				})
			})
		},
		deleteMaterial () {
			const _selData = this.$refs.listTable.selectedRowArr
			const ids = []
			_selData.forEach((v) => {
				ids.push(v.id)
			})
			return new Promise(resolve => {
				this.$fxApi('routing.batchDelete')({
					data: {
						ids: ids
					}
				}).then(res => {
					resolve(res)
				})
			})
		},
		enableRender (h, { row }) {
			return <FxListStateTag
				icon={this.enableState(row.enable, 'icon')}
				label={this.enableState(row.enable, 'label')}
			></FxListStateTag>
		},
		onTableRowDbclick (item) {
			return Promise.all([this.findRouteLineDetailByParam(item.id), this.findRouteDetail(item.id)]).then(([routeLineDetail, routedetails]) => {
				this.$emit('on-edit', routeLineDetail, routedetails)
				return Promise.resolve()
			})
		},
		findRouteLineDetailByParam (routeId) {
			return this.$fxApi('routing.findDetailByParam')({
				query: {
					id: routeId
				}
			}).then(res => {
				return Promise.resolve(res)
			})
		},
		findRouteDetail (routeId) {
			return this.$fxApi('routing.findUnitListByParam')({
				query: {
					lineId: routeId
				}
			}).then(res => {
				return Promise.resolve(res)
			})
		},
		// 导出
		onExport () {
			this.$refs.listTable.getMaxSelectedFiveRow().then(res => {
				this.$fxConfirm('是否确定导出？').then(() => {
					this.onExportHandler(res)
				})
			})
		},
		onExportHandler (selectRows) {
			selectRows.forEach(item => {
				var elemIF = document.createElement('iframe')
				elemIF.src = 'technology/line/export/exportPdfLine?lineId=' + item.id
				elemIF.style.display = 'none'
				document.body.appendChild(elemIF)
			})
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.organ-manage-container {
	flex: 1;
	display:flex
	flex-direction: column
	overflow: auto
	.tools-left, .tools-right {
		display:flex
		flex-direction: row
		align-items: center
	}
	.tools-left {
		flex: 1
	}
}
</style>
